<template>
  <div class="cus_dropdown">
    <ga-dropdown position="bl" :popup-visible="popupVisible">
      <ga-button :size="size" class="cur_area" @click="popupVisible = !popupVisible">
        <div class="cur_cluster_name">{{ curClusterInfo?.name || "-" }}</div>
        <icon-down />
      </ga-button>
      <template #content>
        <div class="area_info">
          <p class="tlt">推荐{{ title }}</p>
          <ga-space wrap style="padding: 0 8px">
            <span
              v-for="item in areaList"
              :key="item?.id"
              class="cluster_name"
              :class="{ active_key: curClusterInfo?.id === item?.id }"
              @click="handleSelect(item)"
              >{{ item?.name }}
              <cusBadge :isXc="item?.xc" />
            </span>
          </ga-space>
          <p
            class="tlt is_disabled"
            style="margin-bottom: 8px"
            v-if="disabledAreaList?.length > 0"
          >
            未启用可用区
          </p>
          <ga-space wrap v-if="disabledAreaList?.length > 0">
            <span
              v-for="item in disabledAreaList"
              :key="item?.id"
              class="cluster_name is_disabled"
              >{{ item?.name }}
            </span>
          </ga-space>
        </div>
      </template>
    </ga-dropdown>
  </div>
</template>

<script setup>
import { ref, computed, toRefs, defineModel } from "vue";
import cusBadge from "./cusBadge.vue";
const props = defineProps({
  // 可用
  areaList: {
    type: Array,
    default: () => [],
  },
  disabledAreaList: {
    type: Array,
    default: () => [],
  },
  title: {
    type: String,
    default: "可用区",
  },
  size: {
    type: String,
    default: "medium",
  },
});
const { areaList } = toRefs(props);
// const popupVisible = defineModel("visible", { default: false });
const popupVisible = ref(false);
const curCluster = ref(areaList.value?.[0]);
const curClusterInfo = computed(() => {
  const selected = areaList.value?.find((item) => curCluster?.value?.id === item.id);
  return {
    name: selected?.name || "",
    id: selected?.id || null,
  };
});
const emits = defineEmits(["handleSelect"]);
const handleSelect = (item) => {
  if (!item) return;
  popupVisible.value = false;
  curCluster.value = item;
  emits("change", item);
  //   console.log("item=====", item);
};
const cancel = () => {
  popupVisible.value = false;
  curCluster.value = null;
};
defineExpose({ cancel, curCluster });
</script>

<style lang="scss" scoped>
.active_key {
  color: #0f5ef7 !important;
}
.cur_area {
  width: 240px;
  background: #f4f7fb !important;
  justify-content: flex-start;
  .cur_cluster_name {
    text-align: left;
    flex: 1;
  }
}
.area_info {
  max-width: 640px;
  padding: 0 4px;
  .tlt {
    color: #00a64d;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0%;
    margin: 8px 0;
    // border-bottom: 1px solid #e2e8f4;
    // padding-bottom: 8px;
  }
  .cluster_name {
    font-size: 12px;
    line-height: 22px;
    color: #1d2129;
    min-width: 196px;
    cursor: pointer;
    &:hover {
      color: #0f5ef7;
    }
  }
  .is_disabled {
    border: none;
    cursor: not-allowed;
    color: #989da6;
    margin-bottom: 0;
    &:hover {
      color: #989da6;
    }
  }
}
:deep(.garco-dropdown-open .garco-icon-down) {
  transform: rotate(180deg);
}
</style>
